﻿<!DOCTYPE html>
<!-- saved from url=(0051)http://getbootstrap.com/examples/navbar-static-top/ -->
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/site.css" rel="stylesheet">
    <link href="./css/dev.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/ie-emulation-modes-warning.js"></script>
	<script src="./js/knockout-3.2.0.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Static navbar -->
    <!-- this is invisibale div which used to conculate for other element on this page, DONOT remove it -->
    <div class="dummy-class container-fluid"></div>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid intel-background-color">
		<div class="row intel-row-margin">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a href="/" ><img src="./images/logo.png" class="intel-logo-image" /></a>
			</div>
			<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
			  <ul class="nav navbar-nav navbar-right">
				<li><a href="http://getbootstrap.com/examples/navbar/">SYNCS & SUMMITS</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">DEVELOPMENT</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar/">PROGRESSION</a></li>
				<li><a href="./Static Top Navbar Example for Bootstrap_files/Static Top Navbar Example for Bootstrap.html">NETWORKING</a></li>
				<li><a href="http://getbootstrap.com/examples/navbar-fixed-top/">VIP SERVICES</a></li>
			  </ul>
			</div><!--/.nav-collapse -->

		</div>
      </div>
    </nav>

	<nav class="navbar intel-dev-sub-nav navbar-fixed-top container-fluid">
		<ul class="nav nav-center">
			<li style="display: inline-block;">
			    <a class="intel-text-color-nav-inverse" href="#" onclick="return gotoRegion('#intel-dev-region-1');">What We Can Help You Do</a>
			 </li>
        	<li style="display: inline-block;">
        		<a class="intel-text-color-nav-inverse" href="#" onclick="return gotoRegion('#intel-dev-region-2');">Spotlight Program</a>
        	</li> 
        	<li style="display: inline-block;">
        		<a class="intel-text-color-nav-inverse" href="#" onclick="return gotoRegion('#intel-dev-region-3');">Development Consultants</a>
        	</li> 
      	</ul>
	</nav>


    <div class="intel-dev-body container-fluid text-center">
       
        <div class="row intel-row-margin-padding">
            <div>
                <div class="intel-dev-top">
                    <div class="intel-text-color intel-text-dev-header-top">
                        Development
                    </div>
                
                    <div class="intel-text-dev-content">
                        Our job is understand you, your goals and your busuness context so we can indetify relevant opportunities and plan your custom development plan. We'll partner with ou to get you the resouces you need and check back on your progress so we can iterate and adjust.
                    </div>
                </div>
            </div>
        </div>
			
			<div class="row">
				<div class="col-sm-6">
					<img class="intel-dev-image-1" src="./Images/fpo.png" alt="Image" style="width: 100%" />
				</div>
				<div class="col-sm-6">		
					<img class="intel-dev-image-1" src="./Images/fpo.png" alt="Image" style="width: 100%" />			
				</div>				
			</div>

			<!-- region 1: what we can help you -->
			<div class="intel-background-gray" >
				<div class="intel-text-color intel-dev-header-middle" id="intel-dev-region-1">WHAT WE CAN HELP YOU</div>
				<div class="row">
					<div class="col-xs-6" >
                        <div style="width: 50%; margin: 0px auto 60px auto;">
						<p class="intel-text-color intel-dev-youself-header">Develop Yourself</p>
						<p class="intel-dev-youself-content">Our job is understand you, your goals and your busuness context so we can indetify relevant opportunities and plan your custom development plan. We'll partner with ou to get you the resouces you need and check back on your progress so we can iterate and adjust.</p>
                            </div>
					</div>					
					<div class="col-xs-6">		
                        <div style="width: 50%; margin: 0px auto;">
						<p class="intel-text-color" style="font-size:24px">Develop Yourself</p>	
						<p class="intel-dev-youself-content">Our job is understand you, your goals and your busuness context so we can indetify relevant opportunities and plan your custom development plan. We'll partner with ou to get you the resouces you need and check back on your progress so we can iterate and adjust.</p>		
                            </div>
					</div>					
				</div>
			</div>

			<!-- region 2: spotlight -->
			<div class="intel-dev-spotlight" id='intel-dev-region-2'>
				 <img src="./Images/Spotlight.png" style="visibility:hidden;width:100%"/>
			</div>

			<!-- region 3: consultants -->
			<div class="intel-background-gray" style="padding: 60px 0px 60px 0px" >
				<div class="intel-text-color intel-dev-header-middle" id="intel-dev-region-3">DEVELOPMENT CONSULTANTS</div>
				<p class="intel-dev-consultants-content">We believe that our leader must have access to the best development resouces avaiable.</p>
				<p class="intel-dev-consultants-content">Our approach includes: consultation, assessment, planning, developemnt and feedback.</p>				
			</div>
				

			</div>
			<div class="container-fluid" data-bind="foreach: people">
			    <!-- <div>
			        Name: <b data-bind="text: name"></b>, Address: <b data-bind="text: address"> </b>
			    </div> -->
			    <div class = "intel-dev-bio-list">
				    <div class="row " data-bind="css: { alt: $index()%2}">
						<div class="col-sm-8 intel-dev-bio-img">
							<img data-bind="attr:{src: imageurl}" style="width:100%">
						</div>
						<div class="col-sm-4 intel-dev-bio-info intel-dev-consultant-content">
							<p data-bind="text: name"></p>
							<p data-bind="text: title"></p>
							<p data-bind="text: address"></p>
							<p data-bind="text: phone"></p>
							<p data-bind="text: email" class="intel-text-color"></p>
							<a href="javascript:void(0)" onclick = "showBiography(this);" class="intel-text-color" style="text-decoration: none;">Biography > </a>
							<!-- <b data-bind="text: $index"></b> -->
						</div>					
					</div>
					<div class="intel-dev-bio-dialog intel-background-gray hidden">
						<p class="intel-row-margin intel-dev-content" data-bind="text: bio"></p>
						<a href="javascript:void(0)" id="close" onclick = "closeBiography();"></a>
					</div>
				</div>
			</div>
 
	<script type="text/javascript">

	var Person = function(name, title, address, phone, email, bio, imageurl) {
	    this.name = name;
	    this.title = title;
	    this.address = address;
	    this.phone = phone;
	    this.email = email;
	    this.bio = bio;
	    this.imageurl = imageurl;
	}

		var viewModel = function(items) {
		    this.people = ko.observableArray(items);
		};
	    ko.applyBindings(viewModel([
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blabblal blab blab","./Images/bio-image.png"),
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blab","./Images/bio-image.png"),
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blab","./Images/bio-image.png"),
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blab","./Images/bio-image.png"),
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blab","./Images/bio-image.png"),
	        new Person("DEB BUBBD", "Director, Exxecutive Talent Development", "Folsom, CA","916.377.3942", "debora.a.bubb@intel.com","blal blab blab","./Images/bio-image.png"),
	        ]));
	</script>

		</div>    

    </div> <!-- /container -->

    <!--Footer-->
	<div class="container-fluid intel-container-footer" >
        <div class="row intel-footer intel-row-margin">
            <div class="col-xs-8 text-left intel-text-color-footer">
                © 2014 Intel Executive Forum, All Rights Reserved.
            </div>
            <div class="col-xs-4 text-right">
                <a href="/" class="intel-text-color-footer" style="padding-right: 30px;">Contact</a>
				<a href="/" class="intel-text-color-footer">About</a>
            </div>
        </div>
	</div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
	
	<script>

		function gotoRegion(id)
		{
			var x = $(id).position().top;
			var l = $(window).height()/2;
			$('html, body').animate({scrollTop:Math.abs(x-l)},800);
			return false;
		}

		function showBiography(item)
		{
			var x = $(item.parentNode.parentNode.parentNode.children[1]);
			var isHidden = x.hasClass("hidden");
			$('.intel-dev-bio-dialog').addClass("hidden");
			
			if(isHidden)
			{
				x.removeClass("hidden");
			}
			
			return false;
		}

		function closeBiography()
		{
			$('.intel-dev-bio-dialog').addClass("hidden");			
			return false;
		}

		function setBioInfoMargin()
		{
			var documentHeight = $('.dummy-class').width();
			var x = $('.intel-row-margin').width();
			$('.alt .intel-dev-bio-info').css({'margin-left': (documentHeight-x)/2 +'px'});

			$('.intel-dev-sub-nav').css({'margin-top': $('.navbar-header').height() +'px'});
			$('.intel-dev-body').css({'margin-top': ($('.intel-dev-sub-nav').height())+'px'});
		}

		$(function(){
			setBioInfoMargin();
			$( window ).resize(function() {
				setBioInfoMargin();
			});
			
			//setTimeout(setSlotHeight, 1);
		});

		
	</script>
  

</body></html>